<?php         
$db = new Database;
$auth = Auth::getAuth('current_user');
$user_id = $auth['id'];
$company_id =  $auth['company_id'];
$user_group = $auth['role'];
$user_groupType = $auth['role_type'];
$position_id = $auth['position_id'];
?>
    <div id="modalBox" style="display: none; position: fixed; opacity: 1; z-index: 11000; left: 50%; margin-left: -330px; top: 50px;width:800px;height: 550px;">
        <span class="fontGray">Help file for Step 5</span>
        <div class="hr"></div>
        <ul class="tabs"> 
            <li class="active tabSetting" rel="tab1">Form Settings Panel</li>
            <li class="tabSetting" rel="tab2">Add Fields Panel</li>
            <li class="tabSetting" rel="tab3">Form View Panel</li>
            <li class="tabSetting" rel="tab4">Workflow View</li>
        </ul>
        <div class="tab_container" style="height: 500px;"> 
            <div id="tab1" class="tab_content">
                <div style="float: left;padding: 5px;width: 100%;margin-top: 5px;">
                    <div style="float: left;width: 100%;">
                        <label style="margin-left: 5px;">Field Settings</label><br />
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Field Label</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Field Size</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Options</b> - a button to create new workspace.</label> <br />
                        </div>
                        <label style="margin-left: 5px;">Form Settings</label><br />
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Form Name</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Description</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Label Placement</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Status of request if the processor is updated</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Users</b> - a button to create new workspace.</label> <br />
                        </div>
                        <label style="margin-left: 5px;">Workflow</label><br />
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor Type</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Action Status</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor Buttons if the processor is updated</b> - a button to create new workspace.</label> <br />
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab2" class="tab_content">
                <div style="float: left;">
                    <label style="margin-left: 5px;">Add Fields Panel</label><br />
                    <div style="margin-left: 20px;margin-top: 10px;">
                        <label style="margin-left: 5px;">
                            <img src="/images/steps/step5-html.png"> <br />
                            - All button on the add fields panel is available to create you a form.
                        </label>
                    </div>
                </div>
            </div>
            <div id="tab3" class="tab_content">
                <div style="float: left;">
                    <div style="margin-left: 20px;margin-top: 10px;">
                        <label style="margin-left: 5px;">
                            - All button on the add fields panel is available to create you a form.
                        </label><br />
                            <img src="/images/steps/step5-FV.png">
                        <br />
                        <div class="hr"></div>
                        <div style="float: left;width: 50%;">
                            <img src="/images/steps/step5-fvSettings.png" style="height: 200px;width: 300px;">
                        </div>
                        <div style="float: left;width: 50%;">
                            <label style="margin-left: 5px;">
                                - All button on the add fields panel is available to create you a form.
                            </label>
                        </div>
                        <div class="hr"></div>
                        <div style="float: left;width: 100%;">
                            <label style="margin-left: 5px;">
                                - All button on the add fields panel is available to create you a form.
                            </label><br />
                                <img src="/images/steps/step5-fvset1.png">
                        </div>
                        <div class="hr"></div>
                        <div style="float: left;width: 50%;">
                            <img src="/images/steps/step5-fSet.png" style="height: 200px;width: 300px;">
                        </div>
                        <div style="float: left;width: 50%;">
                            <label style="margin-left: 5px;">
                                - All button on the add fields panel is available to create you a form.
                            </label>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            <div id="tab4" class="tab_content">
                <div style="float: left;width: 50%;margin-top: 10px;">
                    <label style="margin-left: 5px;">
                        - All button on the add fields panel is available to create you a form.
                    </label> <br />
                    <img src="/images/steps/step5-wofkflow1.png">
                </div>
                <div style="float: left;width: 50%;margin-top: 10px;">
                    <label style="margin-left: 5px;">
                        - All button on the add fields panel is available to create you a form.
                    </label> <br />
                    <img src="/images/steps/step5-workflow2.png">
                </div>
                <div style="float: left;width: 100%;margin-top: 10px;">
                    <label style="margin-left: 5px;">
                        - All button on the add fields panel is available to create you a form.
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div id="modalBg" style="display: none; opacity: 0.5;"></div>
    
    <div class="checklistStep" style="z-index: -10000;position: fixed;right: 0;bottom: 0;top:0;margin: 32px 0px 0px 0px;border-left: 1px solid #ddd; width: 190px; min-height: 100%;overflow: auto;background-color: #fff;">
        <?php
        if($_GET['next']=="1"||$_GET['next']==""){
            ?>
            <span class="fontGray">Procedures for Step 1</span>
            <div class="hr"></div>
                <ul style="font-size: 11px;">
                    
                        <li class="step1-1 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            1.1 - 
                            Click the <button class="button-icon" disabled="disabled"><li class="icon-plus"></li></button> 2x at the right side of the workspace bar to add a node for your organizational chart.
                        </li>
                    <li class="step1-2 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.2 - Drag the node where ever you want to place it.
                    </li>
                    <li class="step1-3 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.3 - After you clicked the button, the node will showed on the screen then double click the node and enter your prefered text/name.
                    </li>
                    <li class="step1-4 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.4 - Once you place your node to the specific place that you want, just drag this <button class="button-icon" disabled="disabled" style="padding:5px;"><div style="width: 5px;height: 5px;padding-left: 5px;border: 3px double #3870A8;border-radius: 5px;
                        background-color: white;"></div></button> and drop it to another node to create a connection.
                    </li>
                    <li class="step1-5 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.5 - Optional, if you want to delete the line/node just click it when it highlighted then press the
                        <button class="button-icon" disabled="disabled"><li class="icon-trash"></li></button>
                        button to delete that.
                    </li>
                    <li class="step1-6 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.6 -  Optional, if you want to make a new workspace, just click the
                        <button class="button-icon" disabled="disabled"><li class="icon-file"></li></button>
                        button to remove previous created node from the screen.
                    </li>
                    <li class="step1-7 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.7-  Last if you've done setting up your organizational chart , you need to click the
                        <button class="button-icon" disabled="disabled"><li class="icon-ok"></li></button>
                        button to save it.
                    </li>
                </ul>
            <?php
        }elseif($_GET['next']=="2"){
            ?>
            <span class="fontGray">Procedures for Step 2</span>
            <div class="hr"></div>
                <ul>
                        <li class="step2-1 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            2.1. Enter/set your prefered position for your company.
                        </li>
                    <li class="step2-2 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        2.2. Then click <input type="button" class="button-icon" value="submit" /> button to add your created position to your list.
                    </li>
                    <li class="step2-3 step2" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        2.3. Optional, If you want to edit,delete or deactivate the created position / existing position
                        you need to click those actions like <icon class="icon-edit"></icon> icon, <icon class="icon-remove"></icon> icon, or <icon class="icon-trash"></icon> icon.
                    </li>
                </ul>
            <?php
        }elseif($_GET['next']=="3"){
            ?>
            <span class="fontGray">Procedures for Step 3</span>
            <div class="hr"></div>
                <ul>
                    
                        <li class="step3-1 step3" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            3.1. On the 3rd step, if you have any user  or you as the admin, you need to specify what group do you want
                            to belong to remove user/you on the list.
                        </li>
                    
                    <li class="step3-2 step3" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        3.2. Click <icon class="icon-edit"></icon> icon to change the group of the selected user.
                    </li>
                    <li class="step3-3 step3" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        3.3. Delete selected user by clicking the <icon class="icon-trash"></icon> icon.
                    </li>
                </ul>
            <?php
        }elseif($_GET['next']=="4"){
            ?>
            <span class="fontGray">Procedures for Step 4</span>
            <div class="hr"></div>
                <ul>
                    <a rel="modalBg" name="test" href="#modalBox" style="color: #000;">
                        <li class="step4-1 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            4.1. To view the content of every bar shown on step 4,
                            you need to click the <icon class="icon-plus"></icon> icon to open it or collapse the bar.
                        </li>
                    </a>
                    <li class="step4-2 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.2. For Processor button / Processor Status
                    </li>
                    <li class="step4-3 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.2.1. Enter/set your prefered name for your processor button/status
                    </li>
                    <li class="step4-4 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.2.2. Then click <input type="button" class="button-icon" value="submit" /> button to add your created name to your list.
                    </li>
                    <li class="step4-5 step4" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        4.3. Optional, If you want to edit,delete or deactivate the created name
                        you need to click those actions like <icon class="icon-edit"></icon> icon, <icon class="icon-remove"></icon> icon, or <icon class="icon-trash"></icon> icon.
                    </li>
                </ul>
            <?php
        }elseif($_GET['next']=="5"){
            ?>
            <span class="fontGray">Procedures for Step 5</span>
            <div class="hr"></div>
                <ul>
                    <a rel="modalBg" name="test" href="#modalBox" style="color: #000;">
                        <li class="step5-1 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            5.1. In creating a form, you have 3 panel the
                            Form Settings, Add fields, and form view.
                            for you 1st step under step 5
                            set/ change a name of Untitled Form by selecting it on the 3rd panel (Form View)
                        </li>
                    </a>
                    <li class="step5-2 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.2. Once you clicked that, the tab from 1st panel (Form Settings) will show,
                        then change settings of your current form.
                    </li>
                    <li class="step5-3 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.3. On the 2nd panel (Add Fields) 
                        click any button to add html object to the 3rd Panel (Form View)
                    </li>
                    <li class="step5-4 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.4 To update the selected html object just click it from the 3rd panel to change the settings of it
                        on the Field Setting tab of 1st panel ( Form Settings)
                    </li>
                    <li class="step5-5 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.5. For the last part you need to create a workflow for your form,
                        click the 3rd tab on the form settings.
                    </li>
                    <li class="step5-6 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.6. On the workflow objects set a processor per flow of your workflow then specify what action did they do
                        when user have a request to approve.
                    </li>
                    <li class="step5-7 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.7. After you set your workflow click button <button class="button-icon" disabled="disabled"><li class="icon-stop"></li></button> button to end the workflow.
                    </li>
                    <li class="step5-8 step5" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        5.8. Lastly, After you set your form, you need to save it by click the <button class="button-ok" disabled="disabled"><li class="icon-plus"></li></button> button from the right side bar panel of (Form View).
                    </li>
                </ul>
            <?php
        }
        ?>
        
    </div>
    <div class="body_contents">
        <!--input type="button" class="button-icon startTutorial" value="Start Tutorial"/-->
            <?php
            //echo $_GET['current'];
            if($_GET['next']=="1"||$_GET['next']==""){
                echo '<div style="text-align: center;">';
                echo '  <img src="/images/steps/step1A.png" style="cursor:pointer;"/>
                        <img src="/images/steps/step2.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step4.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/>';
                echo '</div>';
                echo '<div class="orgChart_step1"></div>';
            }elseif($_GET['next']=="2"){
                echo '<div style="text-align: center;">';
                echo '  <img src="/images/steps/step1.png" style="cursor:pointer;" />
                        <img src="/images/steps/step2A.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step4.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/>';
                echo '</div>';
                echo '<div class="orgChart_step2"></div>';
            }elseif($_GET['next']=="3"){
                echo '<div style="text-align: center;">';
                echo '  <img src="/images/steps/step1.png" style="cursor:pointer;" />
                        <img src="/images/steps/step2.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step3A.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step4.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/>';
                echo '</div>';
                echo '<div class="orgChart_step3"></div>';
            }elseif($_GET['next']=="4"){
                echo '<div style="text-align: center;">';
                echo '  <img src="/images/steps/step1.png" style="cursor:pointer;" />
                        <img src="/images/steps/step2.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step4A.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/>';
                echo '</div>';
                echo '<div class="orgChart_step4"></div>';
            }elseif($_GET['next']=="5"){
                echo '<div style="text-align: center;">';
                echo '  <img src="/images/steps/step1.png" style="cursor:pointer;" />
                        <img src="/images/steps/step2.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step4.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step5A.png" style="margin-left: -30px; cursor:pointer;"/>';
                echo '</div>';
                echo '<div class="orgChart_step5"></div>';
            }else{
                echo '<div style="text-align: center;">';
                echo '  <img src="/images/steps/step1A.png" style=" cursor:pointer;"/>
                        <img src="/images/steps/step2.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step4.png" style="margin-left: -30px; cursor:pointer;"/>
                        <img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/>';
                echo '</div>';
                echo '<div class="orgChart_step1"></div>';
            }
            ?>
            <script>
                $(document).ready(function(){
                    $(".orgChart_step1").load("/ajaxExternal/orgChart");
                    $(".orgChart_step2").load("/ajaxExternal/addPosition");
                    $(".orgChart_step3").load("/ajaxExternal/adminDep");
                    $(".orgChart_step4").load("/ajaxExternal/adminSet");
                    $(".orgChart_step5").load("/ajaxExternal/createForm");
                });
            </script>
    </div>